<template>
  <div class="app-container" v-loading="pageLoading">
    <!-- <el-button type="primary" class="fr" @click="createItem">创建</el-button> -->
    <div class="filter-container">
      <el-select class="filter-item" style="width: 200px" v-model="query.queryString.warehouse_id" placeholder="选择仓库"
        clearable>
        <el-option v-for="i in warehouseList" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 200px" placeholder="输入物料查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.material"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="getStockDetail(v.row, v.$index)">库位明细&nbsp;</a>
        <a href="#" class="text-green" @click.prevent="goDetail(v.row, v.$index)">批次明细&nbsp;</a>
        <a href="#" class="text-yellow" @click.prevent="goDetail2(v.row, v.$index)">异动日志&nbsp;</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <el-dialog title="库位库存" width="70%" :close-on-click-modal="false" :visible.sync="dialogShowDetail">
      <z-table :list="listDetail" :tableProps="tablePropsDetail" :columns="columnsDetail"></z-table>
    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'wInventory',
  mixins: [commonMixin],
  data: function () {
    return {
      api: this.$api.wInventory,
      name: '库存总表',
      columns: [
        { title: '仓库代码', key: 'warehouse_code', width: 140 },
        { title: '仓库名称', key: 'warehouse_name', width: 140 },
        { title: '料号', key: 'key_part_no', width: 200 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '库存总量', key: 'qty', width: 140 },
        { title: '单位', key: 'unit_name', width: 70 },
      ],
      fields: [],
      query: {
        queryString: {},
        page: 1,
        size: 10,
      },
      tableProps: {
        border: true,
        opsColWith: 210,
        hideOperations: false,
      },
      warehouseList: [],
      dialogShowDetail: false,
      listDetail: [],
      columnsDetail: [
        { title: '仓库代码', key: 'warehouse_code', width: 130 },
        { title: '仓库名称', key: 'warehouse_name', width: 130 },
        { title: '库位代码', key: 'stock_code', width: 130 },
        { title: '料号', key: 'key_part_no', width: 200 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '库存数量', key: 'qty', width: 130 },
      ],
      tablePropsDetail: {
        border: true,
        opsColWith: 120,
        hideOperations: true,
      },
    }
  },
  methods: {
    getStockDetail(v) {
      this.pageLoading = true
      this.$request(this.$api.wInventoryDetail + 'getlist', {
        size: 0,
        page: 1,
        queryString: {
          warehouse_id: v.warehouse_id,
          key_part_no: v.key_part_no,
        },
      })
        .then((r) => {
          this.pageLoading = false
          let tmp = {}
          _.forEach(r.list, (i) => {
            if (tmp[i.stock_code]) {
              tmp[i.stock_code].qty = _.add(tmp[i.stock_code].qty, i.qty)
            } else {
              tmp[i.stock_code] = {
                warehouse_code: i.warehouse_code,
                warehouse_name: i.warehouse_name,
                stock_code: i.stock_code,
                key_part_no: i.key_part_no,
                key_part_name: i.key_part_name,
                qty: i.qty,
              }
            }
          })
          this.listDetail = Object.values(tmp)
          this.dialogShowDetail = true
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    goDetail(v) {
      this.$store.dispatch('delView', { name: 'wInventoryDetail' }).then((r) => {
        this.$router
          .push({
            name: 'wInventoryDetail',
            params: { warehouse_id: v.warehouse_id, material: v.key_part_no },
          })
          .catch(() => {})
      })
    },
    goDetail2(v) {
      this.$store.dispatch('delView', { name: 'wInventoryLog' }).then((r) => {
        this.$router
          .push({
            name: 'wInventoryLog',
            params: { warehouse_id: v.warehouse_id, material: v.key_part_no },
          })
          .catch(() => {})
      })
    },
    fetchParams() {
      this.query.queryString = Object.assign({}, this.query.queryString, this.$route.params)
      this.getList()
    },
  },
  created: function () {
    this.fetchParams()
    this.$request(this.$api.warehouse + 'getlist', {
      page: 1,
    })
      .then((r) => {
        this.warehouseList = this.arrayOptions(r.list, 'id', ['warehouse_code', 'warehouse_name'])
      })
      .catch(() => {})
  },
}
</script>
<style scoped>
</style>
